#header .tagcloud a{
  color:#fff; 
}
.tagcloud{
  a.js-tag{
    display:inline-block;  
    text-decoration:none;  
    font-weight: normal;
    font-size:10px;  
    color:$colorF;   
    height:18px;  
    line-height:18px;  
    padding:0 5px 0px 10px;  
    position:relative;  
    border-radius:0 5px 5px 0; 
    margin: 5px 9px 5px 8px;
    font-family: Menlo, Monaco, "Andale Mono", "lucida console";
    &:hover{
      opacity: 0.8;
    }
    &::before{
      content: " ";
      width: 0px;
      height: 0px;
      position: absolute;
      top: 0;
      left: -18px;
      border: 9px solid transparent;
    }
    &::after{  
      content:" ";  
      width:4px;  
      height:4px;  
      background-color:$colorF;  
      border-radius:4px;  
      box-shadow:0px 0px 0px 1px rgba(0,0,0,.3);  
      position:absolute;  
      top: 7px;
      left: 2px;
    }  
  }

  @for $index from 1 to length($tagcolorList)+1 {
    a.color#{$index}{
      background: nth($tagcolorList,$index);
      &::before{
        border-right-color: nth($tagcolorList,$index);  
      }
    }
  }
}


.article-tag-list{
  .article-tag-list-item{
    float: left;
  }
}
.article-pop-out{
  float: left;
  .icon-thumb-tack {
    color: $color9;
    float: left;
    margin-right: 10px;
    margin-top: 6px;
  }
}
.article-tag, .article-category{
  float: left;
  .article-tag-list{
    float: left;
  }
  .icon {
    color: $color9;
    float: left;
    margin-right: 10px;
    margin-top: 8px;
  }
}
.article-pop-out {
  float: left;
}

.archive-article-date {
  color: $color9;
  margin-right: $articlePadding;
  float: right;
  transition: color 0.3s;
  &:hover {
    color: #b5b5b5;
  }
  .icon {
    margin: 5px 5px 5px 0;
  }
}